﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <div class="v-txt-complete">
        <input class="vtc-inputor" @click="poper.show()" v-model="value" :class="{error:iserr}" @keydown.up="go(-1)" @keydown.down="go(1)" @keydown.enter="godone"/>
        <ul class="vtc-options">
            <li v-for="p,idx in options" :class="{slcted:idx==sIdx}" @click.stop="slct(p)">{{p}}</li>
        </ul>
    </div>
</template>
<script>
    vm={
        props: {
            placeholder: {
                type: String,
                default:'请输入或选择'
            },
            src: {
                type: Array,
                default:[]
            },
            inputble: {
                type: Boolean,
                default:true
            },
            value: {
                type: String,
                default:''
            },
            required: {
                type: Boolean,
                default:false
            },
            iserr: {
                type: Boolean,
                default:false
            },
            customvalue: {
                type: Boolean,
                default:true
            },
            parentui: {
                type: LController,
                default:null
            }
        },
        mounted: function () {
            var li = $(this.$el).children(".vtc-options").eq(0);
            var viewer = $(this.$el).children(".vtc-inputor").eq(0);
            if (!this.poper) {
                this.poper = new LiberUI.PopPanel(li)
                        .option("AutoPopout", false)
                        .option("AutoHide",false)
                        .PopFor(viewer);
            }
        },
        data: function () {
            var opt = {
                options: this.src,
                sIdx: -1,
                sValue:'',
                poper: null,
                close:false
            };
            return opt;
        },
        watch: {
            'value': function () {
                if (this.close) {
                    /*输入规则检查*/
                    if (this.required) {
                        if (!this.value) {
                            this.iserr = true;
                        }
                        else if (!this.customvalue && this.src.indexOf(this.value) == -1) {
                            this.iserr = true;
                        }
                        else {
                            this.iserr = false;
                        }
                    }
                }
                else if(this.value&&this.value!==this.sValue){
                    this.options = this.src.filter(this.reduce);
                    if(this.sIdx>this.options.length-1||(this.sIdx>-1&&this.options[this.sIdx].indexOf(this.value)==-1)){
                    	this.sIdx=-1;
                    }
                    this.poper.show();
                }
                else if(this.sIdx==-1){
                    this.options = this.src;
                    if(this.sIdx>this.options.length-1||(this.sIdx>-1&&this.options[this.sIdx].indexOf(this.value)==-1)){
                    	this.sIdx=-1;
                    }
                }
                this.$emit("onslcted", this.value);
                this.close = false;
            },
            'parentui': function () {
                if (this.parentui&&this.parentui.on) {
                    this.parentui.on("hiden", function () { this.poper.hide(); }.bind(this));
                    this.parentui.on("shown", function () { this.value = null; this.options = this.src; }.bind(this));
                };
            }
        },
        methods: {
            reduce: function (k) {
                return k.indexOf(this.value) > -1;
            },
            slct: function (v) {
                this.sIdx = -1;
                this.sValue = v;
                this.value = v;
                this.close = true;
                this.poper.hide();
            },
            godone: function () {
                this.close = true;
                this.poper.hide();
            },
            go: function (ud) {
                if (ud == -1) {
                    if (this.sIdx > 0) {
                        this.sIdx -= 1;
                    }
                    else {
                        this.sIdx = this.options.length - 1;
                    }
                    this.sValue = this.options[this.sIdx];
                }
                else{
                    if (this.sIdx < this.options.length - 1) {
                        this.sIdx += 1;
                    }
                    else {
                        this.sIdx = 0;
                    }            
                    this.sValue = this.options[this.sIdx];
                }
                this.value = this.sValue;
            }
        }
    }
</script>